<template>
	<view class="user_fav_index">
		<view class="fav_nav">
			<view :class="params.is_type==0?'item ck':'item'" @click="typeClick(0)">收藏商品</view>
			<view :class="params.is_type==1?'item ck':'item'" @click="typeClick(1)">关注店铺</view>
		</view>
		<mescroll-body ref="mescrollRef" @up="upCallback" @down="downCallback">
			<uni-swipe-action class="address_list">
				<uni-swipe-action-item class="" :right-options="options" v-for="(item, index) in list" :key="index" @click="onClick(item.out_id)">
					<view class="fav_item" v-if="params.is_type==0"  @click="$nav('/pages/goods/info?id='+item.out_id)">
						<view class="imgs2"><image :src="item.goods_master_image||''" mode="aspectFill"></image></view>
						<view class="content">
							<view class="title">{{item.goods_name||'加载中...'}}</view>
							<view class="num">商品</view>
							<!-- <view class="inte">市场价 ￥{{'100'}}</view> -->
							<view class="market" style="margin-top: 20rpx;"><text class="price">￥{{item.goods_price||'0.00'}}</text></view>
						</view>
					</view>
					
					<view class="fav_item" v-if="params.is_type==1"  @click="$toNav('/pages/store/index?id='+item.out_id)">
						<view class="imgs2"><image :src="item.store_logo||''" mode="aspectFill"></image></view>
						<view class="content">
							<view class="title">{{item.store_name}}</view>
							<view class="num">店铺</view>
							<view class="rate"><text>点击前往</text></view>
							<!-- <view class="market"><text class="price">0.25</text>km</view> -->
							<!-- <view class="address"><text class="qwfont iconpersonLocation"></text>{{item.store.area_info+' '+item.store.store_address}}</view> -->
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				params:{
					page:1,
					per_page:10,
					is_type:0,
				},
				list:[],
				options:[
					{
						text: '删除',
						style: {
							backgroundColor: '#ea1f22'
						}
					}
				],
			};
		},
		methods:{
			onClick(e){
				let obj = {...this.$api.favs}
				obj.url = obj.url+'/'+e
				obj.method = 'delete'
				this.$http(obj,{is_type:this.params.is_type}).then(res=>{
					this.mescroll.resetUpScroll();
				})
			},
			typeClick(e){
				this.params.is_type = e;
				this.mescroll.resetUpScroll();
			},
			upCallback(page){
				this.params.page = page.num; // 页码, 默认从1开始
				this.params.per_page = page.size; // 页长, 默认每页10条
				
				this.$http(this.$api.favs,this.params).then(res=>{
					if(res.code == 200){
						if(this.params.page == 1){
							this.list = [];
						}
						this.list = this.list.concat(res.data.data||res.data); //追加新数据
						this.mescroll.endBySize(this.params.per_page, res.data.total); 
						if(res.data.total<8){
							this.mescroll.endUpScroll(false)
						}
						if(res.data.total==0){
							this.mescroll.showEmpty();
						}
					}
				})
			},
			downCallback(){
				this.mescroll.resetUpScroll();
			}
		}
	}
</script>

<style lang="scss">

.user_fav_index{
	.fav_nav{
		line-height: 80rpx;
		font-size: $uni-font-size-base;
		display: flex;
		border-top:1px solid #efefef;
		.item{
			flex: 1;
			text-align: center;
			background-color: #fff;
			&.ck{
				color:$uni-color-error;
			}
			&:first-child{
				border-right: 1px solid #efefef;
			}
		}
	}
	.address_list{margin-top: 10rpx;}
	.fav_item{
		width: 100%;
		margin-bottom: 10rpx;
		padding: 30rpx;
		background: #fff;
		.content{
			font-size: 28rpx;
			.address{
				line-height: 40rpx;
				color:#999;
				margin-top: 20rpx;
				height: 40rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space:nowrap; 
				.iconpersonLocation{
					margin-right: 10rpx;
				}
			}
			.rate{
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				color:#fff;
				text{
					width: 140rpx;
					text-align: center;
					border-radius: 8rpx;
					padding: 6rpx 0;
					float: left;
					background-color: $uni-color-error;
				}
			}
			.title{
				white-space: wrap;
				height: 46rpx;
				overflow: hidden;
			}
			.num{
				border-radius: 6rpx;
				border:1px solid #efefef;
				font-size: 24rpx;
				display: inline-block;
				padding: 0 8rpx;
				color:#999
			}
			.inte{
				line-height: 80rpx;
				font-size: 24rpx;
				color:#aaa;
			}
			.market{
				.price{
					font-size: 34rpx;
					margin-right: 6rpx;
					color:$uni-color-error;
				}
				.btn{
					background-color: $uni-color-error;
					color:#fff;
					padding: 6rpx 14rpx;
					margin-right: 45rpx;
					float: right;
					border-radius: 6rpx;
				}
			}
		}
		.imgs{
			background-color: #f1f1f1;
			border-radius: 6rpx;
			float: left;
			margin-right: 30rpx;
			image{
				width: 210rpx;
				height: 210rpx;
			}
		}
		.imgs2{
			background-color: #f1f1f1;
			border-radius: 6rpx;
			float: left;
			margin-right: 30rpx;
			image{
				width: 160rpx;
				height: 160rpx;
			}
		}
	}
}
</style>
